<template>
  <div>
    <div class="title">员工信息</div>
    <div class="content">
      <div class="left">

        <el-form :model="form" label-width="120px" label-position="top">
          <div class="box-title">基本信息</div>
          <div class="item-box">
            <el-form-item label="员工ID：">
              <el-input class="input" v-model="form.name" size="small"></el-input>
            </el-form-item>
            <el-form-item label="员工姓名：">
              <el-input class="input" v-model="form.name" size="small">确 定</el-button> size="small"></el-input>
            </el-form-item>
            <el-form-item label="手机号：">
              <el-input class="input" v-model="form.name" size="small">确 定</el-button> size="small"></el-input>
            </el-form-item>
          </div>
          <el-form-item label="角色：">
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="运营"></el-checkbox>
              <el-checkbox label="财务"></el-checkbox>
              <el-checkbox label="管理员"></el-checkbox>
         
            </el-checkbox-group> </el-form-item>
          <div class="box-title">账号信息</div>

          <el-form-item label="登录账号：">
            <el-input class="input" v-model="form.name" size="small">确 定</el-button> size="small"></el-input>
          </el-form-item>
          <el-form-item label="密码：">
            <el-input class="input" v-model="form.name" size="small">确 定</el-button> size="small"></el-input>
          </el-form-item>
          <el-form-item label="状态：">
            <el-select v-model="value" size="small" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                :disabled="item.disabled">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small">取消</el-button>
            <el-button type="primary" size="small">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="cover-box">
        <div>头像</div>
        <el-upload class="cover" action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
          :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-button type="primary">退出登录</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        options:[],
        checkList:[],
        form: {}
      }
    }
  }
</script>
<style lang="scss" scoped>
  .title{
    margin-bottom: 32px;
  }
  .content {
    display: flex;
  }

  .left {
  
    margin-right: 100px;
  }

  .box-title {
    font-weight: 700;
  }

  .item-box {
    display: flex;
  }

  .el-input {
    width: 300px;
    margin-right: 32px;
  }

  .cover-box {
    text-align: center;

    .cover {
      margin: 16px 0;
    }
  }
</style>